<template>
  <el-row :gutter="0" class="topbar-container" :style="{ opacity: opacity }">
    <el-col :span="5">
      <a href="/#/hyperos">
        <img
          class="hyperos-logo"
          src="https://cia.hyperos.mi.com/hyperos-homepage/light_hyperos.svg"
          alt="hyperos-logo"
        />
      </a>
    </el-col>
    <el-col :span="15">
      <ul class="hyperos-middle-menu">
        <a :href="row.url" v-for="row of middleMenu" :key="row.id">
          <li class="hyperos-menu-item">{{ row.name }}</li>
        </a>
      </ul>
    </el-col>
    <el-col :span="4">
      <div class="hyperos-topbar-drawer" @click="toggleDrawer()">
        <el-icon v-if="!showDrawer"><Fold /></el-icon>
        <el-icon v-else="showDrawer"><Close /></el-icon>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="0" v-show="showDrawer">
    <el-col :span="24" class="topbar-drawer">
      <ul class="drawer-menu">
        <a href="" v-for="row of drawerMenu" :key="row.id">
          <li class="drawer-menu-item">{{ row.title }}</li>
        </a>
      </ul>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  interface MenuListType {
    id: number;
    name: string;
    url: string;
  }

  interface DrawMenu {
    id: number;
    title: string;
    targetUrl: string;
    anchorId: "";
  }
  import { ref, onMounted, reactive } from "vue";

  const opacity = ref(1);

  const showDrawer = ref(false);

  const middleMenu: Array<MenuListType> = reactive([
    { id: 1, name: "首页", url: "/#/" },
    { id: 2, name: "跨端物联", url: "https://hyperos.mi.com/continuity" },
    { id: 3, name: "隐私", url: "https://privacy.hyperos.mi.com/#/" },
    { id: 4, name: "无障碍", url: "https://accessibility.mi.com/#/" },
    { id: 5, name: "小米社区", url: "https://www.xiaomi.cn/" },
    { id: 6, name: "云服务", url: "https://i.mi.com/" },
    { id: 7, name: "小米官网", url: "/#/home" },
  ]);

  const drawerMenu: DrawMenu[] = reactive([
    {
      id: 1,
      title: "底层技术",
      targetUrl: "",
      anchorId: "",
    },
    {
      id: 2,
      title: "生命感美学2.0",
      targetUrl: "",
      anchorId: "",
    },
    {
      id: 3,
      title: "跨端智联",
      targetUrl: "",
      anchorId: "",
    },
    {
      id: 2,
      title: "AI",
      targetUrl: "",
      anchorId: "",
    },
    {
      id: 2,
      title: "发版计划",
      targetUrl: "",
      anchorId: "",
    },
  ]);

  const toggleDrawer = () => {
    showDrawer.value = !showDrawer.value;
  };

  /**监听窗口滚动高度，控制topbar显示隐藏 */
  onMounted(() => {
    window.onscroll = () => {
      window.scrollY > 0 ? (opacity.value = 0) : (opacity.value = 1);
    };
  });
</script>

<style lang="scss" scoped>
  @use "./../../../styles/variable.scss" as *;

  .topbar-container {
    width: 100%;
    height: 1rem;
    position: fixed;
    z-index: 1000;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(0, 0, 0, 0.75);
    transition: opacity 0.5s ease-in-out;
  }

  .hyperos-logo {
    padding-top: 0.125rem;
    padding-left: 1.25rem;
    display: block;
    height: 0.47rem;
  }

  .hyperos-middle-menu {
    height: 1rem;
    list-style: none;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }

  .hyperos-menu-item,
  a {
    text-decoration: none;
  }

  .hyperos-menu-item {
    color: $bsWhite;
    font-family: MiSans, system-ui, 微软雅黑, sans-serif;
    font-feature-settings: normal;
    font-variation-settings: normal;
    font-weight: 400;
    font-size: 0.25rem;
  }

  .hyperos-topbar-drawer {
    padding-top: 0.1875rem;
    padding-left: 1.875rem;
    font-size: 28px;
    color: $bsWhite;
    cursor: pointer;
  }

  .topbar-drawer {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100vh - 60px);
    z-index: 1000;
    background-color: rgb(0, 0, 0, 0.75);
    border: 1px solid red;
  }

  .drawer-menu {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    list-style: none;
  }

  .drawer-menu-item {
    border: 1px solid red;
    height: calc(100vh - 60px);
  }

  @media screen and (max-width: 768px) {
    .topbar-container {
      height: 60px;
    }

    .hyperos-logo,
    .hyperos-middle-menu {
      display: none;
    }

    .hyperos-side-menu {
      font-size: 25px;
      padding-left: 20px;
    }
  }
</style>
